<template>
  <div>
    <el-card>



      <el-tabs type="border-card" v-model="activeIndex" closable @tab-remove="removeTab">
        <el-tab-pane label="角色列表" name="1">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="2">
              <el-button type="primary" @click="addButtonClick">添加</el-button>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="搜索角色名" v-model="roleQueryInfo.name" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchButtonClick"></el-button>
              </el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="danger" @click="deleteBatchButtonClick">批量删除</el-button>
            </el-col>

          </el-row>
          <el-row style="margin-bottom: 10px;">
            <el-table
              :data="page.list"

              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="30"
              >

              </el-table-column>
              <el-table-column
                prop="id"
                label="ID"
                width="60">
              </el-table-column>
              <el-table-column
                prop="pid"
                label="父ID"
                width="60">

              </el-table-column>
              <el-table-column
                prop="name"
                label="角色名称"
                width="120">
              </el-table-column>

              <el-table-column
                prop="description"
                label="角色描述"
                width="300">
              </el-table-column>


              <el-table-column
                label="注册时间"
                width="160"
              >
                <template slot-scope="scope">
                  {{formatDateTime(scope.row.createTime)}}
                </template>

              </el-table-column>

              <el-table-column
                label="操作"
                width="120"
              >
                <template slot-scope="scope">

                  <el-button-group>

                    <el-tooltip effect="light" :enterable="false" class="item" content="编辑角色名称和描述" placement="top-end">
                      <el-button plain size="mini" icon="el-icon-edit" type="warning"
                                 @click="editButtonClick(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip :enterable="false" class="item" effect="light" content="删除角色" placement="top-end">
                      <el-button plain size="mini" icon="el-icon-delete" type="danger"
                                 @click="deleteButtonClick(scope.row)"></el-button>
                    </el-tooltip>
                  </el-button-group>
                </template>
              </el-table-column>
              <el-table-column
                label="权限设置"
              >
                <template slot-scope="scope">
                  <el-button plain size="mini" type="primary"
                             @click="assignPermissionButtonClick(scope.row)">分配权限
                  </el-button>
                </template>
              </el-table-column>


            </el-table>
          </el-row>
          <el-row>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNum"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </el-row>
          <el-dialog
            title="添加角色"
            :visible.sync="addDialogVisible"
            width="30%"
          >

            角色名称:
            <el-input v-model="newRole.name"></el-input>
            角色描述:
            <el-input v-model="newRole.description"></el-input>
            父角色ID:
            <el-select v-model="newRole.pid" filterable placeholder="请选择">
              <el-option
                v-for="item in allRoles"
                :key="item.id+''"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>


            <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAddUserButtonClick">确 定</el-button>
  </span>
          </el-dialog>
          <el-dialog
            title="修改角色信息"
            :visible.sync="editDialogVisible"
            width="30%"
          >

            角色名称:
            <el-input v-model="currentEditRole.name"></el-input>
            角色描述:
            <el-input v-model="currentEditRole.description"></el-input>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpdateButtonClick">确 定</el-button>
  </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane name="2" v-if="permissionVisable" label="分配权限">

          <permission-assign :role="currentEditRole"></permission-assign>

        </el-tab-pane>

      </el-tabs>



    </el-card>


  </div>
</template>

<script>
  import {formatDateTime} from "../../../utils/datetime";
  import PermissionAssign from './PermissionAssign'

  export default {
    name: "index",
    components:{
      PermissionAssign
    },
    data() {
      return {

        //权限设置标签页的显示开关
        permissionVisable: false,

        activeIndex:'1',


        defaultProps: {
          children: 'children',
          label: 'menuName'
        },

        page: {
          pageNum: 0,
          pageSize: 0,
          total: 0,
          totalPages: 0,
          list: []
        },

        roleQueryInfo: {
          pageNum: 1,
          pageSize: 5,
          name: ''
        },

        //所有角色列表
        allRoles: [],

        //编辑用户信息的对话框显示开关
        editDialogVisible: false,

        currentEditRole: {},

        //定义一信新的用户对象，用于发送到后端去添加用户
        newRole: {
          name: '',
          description: '',
          pid: 0
        },

        //添加用户的对话框的开关变量
        addDialogVisible: false,

        //被选中的角色ID列表
        selectionRoleIdList: [],

        //修改角色的菜单权限的标签页显示开关
        assignMenuPermissionVisiable: false,

        //修改角色的页面元素权限的标签页显示开关
        assignPageElementPermissionVisiable:false
      }
    },

    created() {
      this.getRoles();
      this.getAllRoles();
    },

    methods: {



      searchButtonClick() {
        this.getRoles();
      },

      deleteBatchButtonClick() {
        if (this.selectionRoleIdList.length == 0) {
          this.$message.info("没有被选中的行,请先去选中再点击批量删除");
          return;
        }

        if (this.selectionRoleIdList.indexOf(1)>-1){
          this.$message.warning("禁止删除admin角色!");
          return;
        }

        this.$confirm("确定要删除所选角色吗?")
          .then(data => {
            //发删除请求
            this.api.__api__deleteRole(this.selectionRoleIdList)
              .then(data => {
                this.getRoles();
                this.$message.success("删除成功");
              })
              .catch(error => {
                this.$message.error("删除失败");
              })
          })
          .catch(error => {
            //不发
          })
      },

      formatDateTime(ms) {
        return formatDateTime(ms);
      },


      addButtonClick() {
        this.addDialogVisible = true;
      },

      getRoles() {
        this.api.__api__getRoles(this.roleQueryInfo)
          .then(data => {

            this.page = data.data;
          })
          .catch(error => {
            this.$message.error("角色分页失败");
          })

      },

      getAllRoles() {
        this.api.__api__getRolesAll()
          .then(data => {
            this.allRoles = data.data;
          })
          .catch(error => {
            this.$message.error("获取角色列表失败");
          })
      },

      handleSizeChange(val) {

        this.roleQueryInfo.pageSize = val;
        this.getRoles();
      },
      handleCurrentChange(val) {
        this.roleQueryInfo.pageNum = val;
        this.getRoles();
      },


      handleSelectionChange(selection) {
        this.selectionRoleIdList = selection.map(x => x.id);

      },





      deleteButtonClick(role) {
        if(role.name=='admin'){
          this.$message.warning("禁止删除admin角色!");
          return;
        }
        this.$confirm("确定要删除ID为" + role.id + "角色吗?", "删除确认")
          .then(rs => {
            this.api.__api__deleteRole([role.id])
              .then(data => {
                this.$message.success("删除角色成功");
                this.getRoles();
              })
              .catch(error => {
                this.$message.error("删除角色失败");
              })
          }).catch(error => {
          console.log(error);
        })
      },


      editButtonClick(role) {
        if(role.name=='admin'){
          this.$message.warning("禁止编辑admin角色!");
          return;
        }
        this.currentEditRole = {...role};

        this.editDialogVisible = true;


      },

      confirmAddUserButtonClick() {
        this.addDialogVisible = false;
        this.api.__api__addRole(this.newRole)
          .then(data => {
            this.$message.success("添加角色成功");
          })
          .catch(error => {
            this.$message.error("添加角色失败");
          })
      },

      confirmUpdateButtonClick() {

        this.editDialogVisible = false;
        this.api.__api__updateRole(this.currentEditRole)
          .then(data => {
            this.$message.success("修改角色成功");
            this.getRoles(); //刷数据
          })
          .catch(error => {
            this.$message.error("修改角色失败");
          })
      },


      assignPermissionButtonClick(role){
        this.currentEditRole = {...role};
        this.activeIndex ='2';
        this.permissionVisable = true;
      },

      removeTab(tabname){
        if(tabname=='2'){
          this.activeIndex = '1';
          this.permissionVisable = false;
        }
      }

    }
  }
</script>

<style scoped>

</style>
